<template>
	<div class="system-sysNotice-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<!-- 功能栏 -->
			<el-form :inline="true" :model="state.queryForm" class="system-sysNotice-search mb15">
					<el-form-item>
							<el-input v-model="state.queryForm.title" placeholder="公告标题"></el-input>
					</el-form-item>
				<el-form-item>
					<el-button size="default" @click="getTableData" type="primary" class="ml10">
						<el-icon><ele-Search /></el-icon>查询
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button size="default" type="success" class="ml10" @click="onCURD('add')">
						<el-icon><ele-FolderAdd /></el-icon>新增
					</el-button>
				</el-form-item>
			</el-form >
			<!-- Table -->
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" @selection-change="selectionChangeHandle">
				<el-table-column v-show="false" type="selection" header-align="center" align="center" width="50"></el-table-column>
							<el-table-column v-if="false" prop="id" label="公告ID" header-align="center" align="center"></el-table-column>
						    <el-table-column prop="title" label="公告标题" header-align="center" align="center"></el-table-column>
						<fast-table-column prop="type" label="公告类型" dict-type="NITICE_TYPE"></fast-table-column>
						<fast-table-column prop="status" label="公告状态" dict-type="SYS_STATE"></fast-table-column>
						<el-table-column prop="createdTime" label="创建时间" header-align="center" align="center"></el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<Auth :value="'system:sysNotice:edit'">
						    <el-button   size="small" text type="primary" @click="onCURD('edit', scope.row)">修改</el-button>
						</Auth>
						<Auth :value="'system:sysNotice:delete'">
						     <el-button   size="small" text type="primary" @click="onCURD('del',scope.row)">删除</el-button>
						</Auth>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
						   :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum" background
						   v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
						   :total="state.tableData.total">
			</el-pagination>
		</el-card>
		<SysNoticeDialog ref="sysNoticeDialogRef" @refresh="formSubmit" />
	</div>
</template>

<script setup lang="ts" name="systemSysNotice">
	// 引入组件
	import FastSelect from "/@/components/fast-select/src/fast-select.vue";
	import FastTableColumn from "/@/components/fast-table-column/src/fast-table-column.vue";
	import FastRadioGroup from "/@/components/fast-radio-group/src/fast-radio-group.vue";

	import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
	import { ElMessageBox, ElMessage } from 'element-plus';
	import { isEmpty } from '/@/utils/mms';
	import { sysNoticeApi } from '/@/api/system/sysNotice/index';
	// 定义变量内容
	// 引入 api 请求接口
	const baseApi = sysNoticeApi();
	const sysNoticeDialogRef = ref();
	const SysNoticeDialog = defineAsyncComponent(() => import('/@/views/system/sysNotice/dialog.vue'));
	// 权限
	const Auth = defineAsyncComponent(() => import('/@/components/auth/auth.vue'));
	const Auths = defineAsyncComponent(() => import('/@/components/auth/auths.vue'));
	const AuthAll = defineAsyncComponent(() => import('/@/components/auth/authAll.vue'));

	const state = reactive<SysNoticeState>({
		queryForm: {
			title: ''
		},
		tableData: {
			data: [],
			total: 0,
			loading: false,
			param: {
				pageNum: 1,
				pageSize: 10
			},
		},
	});

	// 初始化表格数据
	const getTableData = () => {
		state.tableData.loading = true;
		baseApi.list(state.tableData.param).then(res => {
			state.tableData.data = res.rows;
			state.tableData.total = res.total;
			state.tableData.loading = false;
		}).catch(async err => { ElMessage.warning(err); }).finally(() => { })
	};

	//选择
	const selectionChangeHandle=()=>{
       //略
	}
	// 打开修改用户弹窗
	const onCURD = (type: string, row: RowSysNoticeType) => {
		if(type==='add'){
			sysNoticeDialogRef.value.openDialog(type);
			return false;
		}
		if(type==='del'){
			ElMessageBox.confirm(`此操作将永久删除吗?`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				baseApi.delete(row.id).then(res => {
					getTableData();
					ElMessage.success('删除成功');
				}).catch(async err => { ElMessage.warning(err); }).finally(() => { })
			}).catch(() => { });
			return false;
		}
		baseApi.query(row.id).then(res => {
			sysNoticeDialogRef.value.openDialog(type, res.data);
		}).catch(async err => { ElMessage.warning(err); }).finally(() => { })
	};

	// 接收子组件传值
	const formSubmit = (row: RowSysNoticeType) => {
		if (isEmpty(row.id)) {
			//新增
			baseApi.insert(row).then(row => {
				sysNoticeDialogRef.value.closeDialog();
				ElMessage.success(row.msg)
				setTimeout(() => {
					getTableData();
				}, 1000)
			}).catch(async err => { ElMessage.warning(err); }).finally(() => { })
		} else {
			//更新
			baseApi.edit(row).then(row => {
				sysNoticeDialogRef.value.closeDialog();
				ElMessage.success(row.msg)
				setTimeout(() => {
					getTableData();
				}, 1000)
			}).catch(async err => { ElMessage.warning(err); }).finally(() => { })
		}
	}
	// 分页改变
	const onHandleSizeChange = (val: number) => {
		state.tableData.param.pageSize = val;
		getTableData();
	};
	// 分页改变
	const onHandleCurrentChange = (val: number) => {
		state.tableData.param.pageNum = val;
		getTableData();
	};
	// 页面加载时
	onMounted(() => {
		getTableData();
	});
</script>

<style scoped lang="scss">

</style>
